<template>
    <div style="background-color: bisque;">
        状态管理
        <h1>儿子</h1>
        <SonBoy @boy="boyHandle"></SonBoy>
        <h1>女儿</h1>
        <SonGirl @girl="girlHandle"></SonGirl>
        <p>我儿子的成绩是:{{ gradeBoy }},我女儿的成绩是:{{ gradeGirl }}</p>
        <p>我先看看有多少钱，只剩下{{ store.money }}</p>
        <p>给成绩好的奖励100<button @click.once="send(100)">奖励</button></p>
        <p>儿子{{moneyBoy}}女儿{{ moneyGirl }}</p>
    </div>
</template>
<script>
import SonBoy from '../components/SonBoy';
import SonGirl from '../components/SonGirl';
import { useMyStore } from '../store/myStore.js';

export default {
    components:{
        SonBoy,
        SonGirl,
    },
    methods:{
        boyHandle(val){
            this.gradeBoy=val
        },
        girlHandle(val){
            this.gradeGirl=val
        },
        send(val){
            if(this.gradeBoy>this.gradeGirl && this.gradeGirl>=60){
                this.moneyBoy+=val
                this.store.decrement(val)
            }else if(this.gradeBoy<this.gradeGirl && this.gradeBoy>=60){
                this.moneyGirl+=val
                this.store.decrement(val)
            }else if(this.gradeBoy==this.gradeGirl && this.gradeBoy>=60){
                this.moneyBoy+=val/2
                this.moneyGirl+=val/2
                this.store.decrement(val)
            }else{
                alert('滚')
            }
            
        }
    },
    data() {
        return {
            gradeBoy:'',
            gradeGirl:'',
            store:useMyStore(),
            moneyBoy:0,
            moneyGirl:0
        }
    },
}
</script>